<template>
    <div >
		<div style="text-align:left;padding: 10px 10px 10px;">
			<el-select v-model="size" placeholder="请选择" style="width:130px;height: 32px;">
				<el-option
				v-for="item in sizeList"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
			</el-select>
			<el-select v-model="rank"  placeholder="请选择" style="width:130px;height: 32px;">
				<el-option
				v-for="item in rankList"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
			</el-select>
			<el-select v-model="status" placeholder="请选择" style="width:130px;height: 32px;">
				<el-option
				v-for="item in statusList"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
			</el-select>
			<input type="text" v-model="creativeName" placeholder="创意名称" style="float:right;margin-right:20px;height:32px; ">
		</div>
		<br clear="all"/>
		<div style="min-height:300px; overflow-y:auto;overflow-x: auto">
			<div style="text-align:left; margin-left:14px;">
					<input type="checkbox" v-model="checkboxModalAll" name="" id=""> 创意全选
			</div>
			<!-- <div v-loading="loading" v-if="loading" style="margin-top:100px"></div> -->
			<div class="empty" v-show="gridData.length<=0 &&  !loading">
				暂无数据
			</div>
			<ul class="model-ul " >
				<li v-for="(o,i)  in gridData ">
						<el-popover v-if="o.image_type==2"
							placement="right"
							trigger="hover"
							style="display: inline-block;height:110px;overflow: hidden;width: 170px;"
							>
							<!-- <img :src="o.image_path" alt="">  -->
							<iframe width="300" height="350" frameborder="0" scrolling="no" style="width: 300px;height: 350px; position:absolute;top:0;left:0%; transform-origin: left top;border:none;" :src="o.image_path"></iframe>
							<el-button slot="reference" style="width: 170px; height: 110px; padding:0;">
								<!-- <img :src="o.image_path" alt="">  -->
								<iframe width="300" height="350" frameborder="0" scrolling="no" style="transform: scale(0.2857142857142857);transform-origin: left top;position:relative;top:0px;left:0px;border:none;" :src="o.image_path"></iframe>
							</el-button>
						</el-popover>
						<el-popover v-if="o.image_type==1"
							placement="right"
							trigger="hover"
							style="display: inline-block;height:110px;overflow: hidden;width: 170px;"
							>
							<img :src="o.image_path" alt="">
							<el-button slot="reference" style="width: 170px; height: 110px; padding:0;">
								<img :src="o.image_path" alt=""> 
							</el-button>
						</el-popover>
					<div class="center">
						<div>{{ o.creative_size.width }}*{{ o.creative_size.height }}</div>
						<div>{{ o.creative_level }}级</div>
					</div>
					<div style="text-align:left;">
						<input type="checkbox" v-model="checkboxModal" :value="o.id" name="" id="">{{ o.name }}
					</div>
				</li>
			</ul>
		</div>
		<el-pagination  
		:page-size="20"
		:pager-count="11"
		:current-page="currentPageModel"
		layout="prev, pager, next"
		:total="total_count_modl"
		@current-change="pagechangeModel"
		style="margin-top:10px; margin-bottom:10px;"
		v-if="gridData.length>20"
		>
		</el-pagination> 
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>